<template>
	<view class="home">
		<custom-head-bar id="customHeadBar"></custom-head-bar>
		<view class="wrapper">
			<view class="infoModel">
				<view class="left">免费配送</view>
				<view class="right">
					<u-icon name="order" color="#ffa33a" size="24"></u-icon>
					<text>我的订单</text>
				</view>
			</view>
			<view class="scrollLayout">
				
				<view class="leftscroll">
					<scroll-view scroll-y="true" :scroll-top="leftScrollValue" class="sContent">
						<view  class="navitem" 
						:class="index==navIdx?'active':''" 
						v-for="(item,index) in 9"
						@tap="clickNav(index)"
						>商品品类{{item}}</view>
					</scroll-view>
				</view>
				<view class="rightscroll">
					<view class="searchView">
						<u-icon name="search" size="24" colro="#595959"></u-icon>
						搜索
					</view>
					<scroll-view @scroll="rightScrollEnt" :scroll-top="rightScrollValue" scroll-y="true" scroll-with-animation class="sContent" >
						<view  class="productView" v-for="(item,index) in 5">
							<u-sticky :customNavHeight="0" z-index="2">
							<view class="proTitle">
								豆干制品{{item}}
								</view>
								</u-sticky>
								<view class="proContent">
									<view class="productitem" v-for="item in 4">
											<product-item></product-item>
									</view>
								</view>
								
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIdx:0,
				leftScrollValue:0,
				rightScrollValue:0,
				leftHitArr:[],
				rightHitArr:[],
				
			}
		},
		onLoad() {
			this.$nextTick(()=>{
				this.getHeightArr()
			})
			;
		},
		methods: {
			clickNav(index){
				if(this.navIdx == index) return;
				this.navIdx = index;
				if(this.timeout){
					clearTimeout(this.timeout)
				}
				this.timeout = setTimeout(()=>{
					this.leftScrollValue = this.leftHitArr[index];
					this.rightScrollValue = this.rightHitArr[index];	
				},200)
				
			},
			getHeightArr(){
				let selectorQuery  = uni.createSelectorQuery();
				let customHeadBar;
				
				selectorQuery.select("#customHeadBar").boundingClientRect(rect => {
									customHeadBar = rect.height;
								}).exec()
								
				selectorQuery.selectAll(".navitem").boundingClientRect(rects =>{
					this.leftHitArr = rects.map(item =>item.top - customHeadBar-40);
				}).exec()
				console.log(this.leftHitArr);
				
				selectorQuery.selectAll(".productView").boundingClientRect(rects =>{
					this.rightHitArr = rects.map(item =>item.top - customHeadBar-40);
				}).exec()
				
				console.log(this.rightHitArr);
			},
			rightScrollEnt(e){
				let scrollTop = e.detail.scrollTop;
				let idx = this.rightHitArr.findIndex((value,index,arr)=>scrollTop>=value && scrollTop<arr[index+1])
				this.navIdx=idx;
				this.leftScrollValue = this.leftHitArr[idx];
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home{
		height: 100vh;
		display: flex;
		flex-direction: column;
		.wrapper{
			flex: 1;
			background: #ffffff;
			border-radius: 20rpx 20rpx 0 0;
			margin-top: -20rpx;
			position: relative;
			z-index: 2;
			overflow: hidden;
			.infoModel{
				@include flex-box();
				height: 88rpx;
				background: #fff;
				padding: 0 30rpx;
				font-size: 32rpx;
				.right{
					@include flex-box();
				}
			}
			.scrollLayout{
				height: calc(100% - 88rpx);
				@include flex-box();
				.leftscroll{
					height: 100%;
					width: 180rpx;
					border-right: 1rpx solid #d3d3d3 ;
					background-color: #f8f8f8;
					.navitem{
						font-size: 30rpx;
						padding-left: 30rpx;
						line-height: 100rpx;
						color: #3e3e3e;
						position: relative;
						&.active{
							color: #222222;
							background: #fff;
							&::after{
								content: "";
								width: 6rpx;
								height: 30rpx;
								background: #ffaa00;
								position: absolute;
								left: 0;
								top: 50%;
								transform: translateY(-50%);
							}
							
							
						}
					}
				}
				.rightscroll{
					height: 100%;
					flex: 1;
					position: relative;
					.searchView{
						position: absolute;
						top:0;
						right: 30rpx;
						z-index:3;
						@include flex-box();
						height: 88rpx;
					}
					.productView{
						padding: 0 30rpx;
						.proTitle{
							line-height: 88rpx;
							font-size: 30rpx;
							background: #fff;
						}
					}
				}
				.sContent{
					height: 100%;
				}
			}
		}
	}
</style>
